<template>
  <div>
    <!-- 轮播图 -->
    <van-swipe
    :autoplay=3000
    :duration=500
    :loop="true"
    :show-indicators="true">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img class="home-banner" v-lazy="image" alt="首页banner">
      </van-swipe-item>
    </van-swipe>
    <!-- 价格 -->
    <div class="frsbc cff bgcoupon">
      <div class="frsc pl20">
        <p class="frbc"><span class="f28">￥</span><span class="f60">999.00</span></p>
        <div class="pl20">
          <p class="f20 pb10 td-lt">￥1999.00</p>
          <p class="f24">187件已售</p>
        </div>
      </div>
      <div class="countdown tc bgff">
        <p class="f24 pt20 coupon-color pb10">距结束仅剩</p>
        <p class="f28">
          <span class="time">09</span>
          <span class="colon">:</span>
          <span class="time">09</span>
          <span class="colon">:</span>
          <span class="time">09</span>
        </p>
      </div>
    </div>
    <!-- 商品标题 分享 -->
    <div class="frcc p20 bgff bbeb">
      <p class="f34 mr20 product-title">MG小象系带短袖t恤女夏装2017新款韩版chic百搭荷叶袖宽松上衣潮 </p>
      <span class="f24 share">分享</span>
    </div>
    <!-- 快递 销量 库存 -->
    <div class="frsbc plr20 bgff f28 bbeb c99 ksc-cell mb20">
      <span>快递: 0.00</span>
      <span>销量: 9101</span>
      <span>存量: 91</span>
    </div>
    <!-- 领券 -->
    <div class="bgff frsbc bbeb bteb f28 plr20 coupon-size-location-cell">
      <span class="c65 name">领券</span>
      <span class="desc">满多少减多少；满多少减多少；</span>
      <span class="arrow-right"></span>
    </div>
    <!-- 选择 颜色 尺寸 -->
    <div class="bgff frsbc bbeb f28 plr20 coupon-size-location-cell">
      <span class="c65 name">选择</span>
      <span class="desc">尺寸 颜色</span>
      <span class="arrow-right"></span>
    </div>
    <!-- 配送地址 -->
    <div class="mb20 frsbc bgff bbeb f28 plr20 coupon-size-location-cell">
      <span class="c65 name">送至</span>
      <span class="desc">地址</span>
      <span class="arrow-right"></span>
    </div>
    <!-- tab 商品详情 顾客评论 -->
    <div class="bgff bbeb bteb f28 frac tc detail-comment c65">
      <span class="tab-item">商品详情</span>
      <span class="tab-item">客户评论</span>
    </div>
    <!-- 商品详情 -->
    <div></div>
    <!-- 客户评论 -->
    <div class="comment">

    </div>
    <!-- 底部 加入购物车 立即购买 -->
    <div class="fixed-bottom-cell frsc bgff">
      <div class="fccc small-button bteb" v-for="(item, index) in smallButtonImg" :key="index">
        <img class="icon" :src="item.url" alt="">
        <span class="f24 tc small-text">{{item.text}}</span>
      </div>
      <span class="f32 button cff cart tc">加入购物车</span>
      <span class="f32 button cff bgcoupon tc">立即购买</span>
    </div>
    <div class="space"></div>
    <div class="space"></div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      images: [
        require('@/common/image/index-banner.png'),
        require('@/common/image/index-banner.png'),
        require('@/common/image/index-banner.png')
      ],
      smallButtonImg: [
        {url: require('@/common/image/home-small-button.png'), text: '首页'},
        {url: require('@/common/image/shoucang.png'), text: '收藏'},
        {url: require('@/common/image/kefu.png'), text: '客服'}
      ]
    }
  }
}
</script>

<style lang="stylus" scoped>
.van-swipe-item,.home-banner
  height 7.50rem
  width 7.50rem
.home-banner
  object-fit cover
// 倒计时
.countdown
  flex-basis 2.60rem
  height 1.00rem
  background url('~@/common/image/countdown.png') no-repeat left center;
  background-size cover
.time
  display inline-block
  width .40rem
  height .40rem
  line-height .40rem
  border-radius .04rem
  background-color #5A3510
.colon
  color #5A3510
// 商品标题 分享
.product-title
  flex-grow 1
  line-height .38rem
.share
  padding-left .38rem
  flex-shrink 0
  heihgt .38rem
  line-height .38rem
  background url('~@/common/image/share.png') no-repeat left center
  background-size .38rem .38rem
// 快递销量存量
.ksc-cell
  height .60rem
  line-height .60rem
// 领券，选择，送至
.coupon-size-location-cell
  height 1.00rem
  line-height 1.00rem
.name
  padding-right .30rem
.desc
  flex-grow 1
.arrow-right
  display inline-block
  height .26rem
  width .26rem
  background url('~@/common/image/arrow-right.png') no-repeat center center
  background-size .26rem .26rem
// 详情 评论
.detail-comment,.tab-item
  height 1.00rem
  line-height 1.00rem
.tab-item.active
  color #FF4444
// 固定底部
.fixed-bottom-cell
  width 100vw
  position fixed
  bottom 50px
  left 0
  height .96rem
.small-button
  height .96rem
  width .96rem
  &:hover
    background-color #ebebeb
.icon
  height .46rem
  width .46rem
.small-text
  height .26rem
  line-height .26rem
.button
  flex-grow 1
  height .96rem
  line-height .96rem
.cart
  background-color #F1AE2D
</style>
